<template>
  <div class="grade-wrap relative">
    <svg class="progress-circle" width="200" height="200">
      <!-- 辅助圆环 -->
      <circle stroke="#f4f7fb" />
      <!-- 进度圆环 -->
      <circle stroke="#51c3ff" style="stroke-dasharray: 4.25rem, 1000" />
    </svg>
    <span class="font-medium text-51C3FF">{{ value }}</span>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.grade-wrap {
  height: 200px;

  .progress-circle {
    width: 200px;
    height: 200px;
    transform: rotate(-90deg);
    border-radius: 50%;

    & > circle {
      cx: 100px;
      cy: 100px;
      r: 90px;
      fill: none;
      stroke-width: 20px;
      stroke-linecap: round;
    }
  }

  span {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 50px;
  }
}
</style>
